<template>
	<view class="content">
		<view class="account">
			<i class="iconfont iconzhanghaoxinxi"></i>
			<input class="input_box" type="tel" placeholder="请输入手机号" placeholder-style="color:#999999" v-model="phone" name="phone">
		</view>
		
		<view class="account account_iden">
			<view class="account_iden_left">
				<i class="iconfont iconyanzhengma"></i>
				<input class="input_box" type="text" placeholder="请输入验证码" placeholder-style="color:#999999" v-model="code">
			</view>
			<view class="get_iden" :class="{green_yan:yan}" @click="getYan()">{{codeText}}</view>
		</view>
		
		<view class="account">
			<i class="iconfont iconmima1"></i>
			<input class="input_box" type="text" v-model="pwd" placeholder="请输入新密码" placeholder-style="color:#999999">
		</view>
		<view class="tips"><text>*</text>最少8位，至少包括一个大写字母、一个小写字母、一个数字</view>
		<view class="account">
			<i class="iconfont iconmima1"></i>
			<input class="input_box" type="text" v-model="pwd2" placeholder="请再次输入密码" placeholder-style="color:#999999">
		</view>
		<button class="btn" @click="updatePwd">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:"",
				pwd: '',
				pwd2: '',
				yan: false,
				code: "" ,//验证码
				codeText: '获取验证码',
				count:0,
				timer:null
			};
		},
		methods:{
			getYan() {
				var rule = [
					{
						name: "phone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的手机号"
					}
				];
				if(this.phone != ""){
					var yanData = {
						'phone': this.phone,
						'code_type': 'retrieveps_code'
					}
					this.$zapi.apiPost('user/currency.Code/SendCode',yanData).then(res => {
					if (res.data.code == 200) {
						this.getInterval(); //定时器
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
					})
				} else {
					uni.showToast({
						title:"请输入正确的手机号",
						icon:"none"
					})
					this.yan = false
				}
			},
			updatePwd() {
				var data = {
					'phone': this.phone,
					'pwd': this.pwd,
					'verification_code': this.code
				}
				var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/; //密码验证规则
				if(!reg.test(this.pwd)) {
					uni.showToast({
						title: "新密码格式不正确",
						icon: "none"
					})
				} else {
					if(this.pwd != this.pwd2) {
						uni.showToast({
							title:"您两次输入的密码不一致",
							icon:"none"
						})
					} else {
						this.$zapi.apiPost('user/currency.user/ForgetPsw',data).then(res => {
							if(res.data.code == 200) {
								uni.showToast({
									title:"密码修改成功",
									icon:"none"
								})
								this.$zapi.apiPost('user/currency.basic/UserLoginOut').then(res => {return})
								setTimeout(function() {
									uni.reLaunch({
										url: '../user/login'
									})
								}, 3000);
							} else {
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}
						})
					}
				}
			},
			getInterval() {
				var that=this;
				uni.showToast({
					title: '短信发送成功',
					duration: 1000,
					success: function(res) {
						const TIME_COUNT = 60;
						that.count = TIME_COUNT;
						that.timer = setInterval(() => {
							if (that.count > 0 && that.count <= TIME_COUNT) {
								// 倒计时时不可点击
								that.yan = true;
								// 计时秒数
								that.count--;
								// 更新按钮的文字内容
								that.codeText = that.count + 's后重新获取';
							} else {
								// 倒计时完，可点击
								that.yan = false;
								// 更新按钮文字内容
								that.codeText = '获取验证码';
								// 清空定时器!!!
								clearInterval(that.timer);
								that.timer = null;
							}
						}, 1000);
					}
				});
			}	
		}
	}
</script>

<style lang="stylus" scoped>
	.content
		padding-top .4rem
		margin: 0 30upx
		.account_iden
			justify-content space-between
			.account_iden_left
				display flex
				align-items center
			.get_iden
				display inline-flex
				align-items center
				font-size .8rem
				line-height 1
				padding 18upx
				color #999999
				border 2upx solid #E5E5E5
				border-radius 34upx
				min-width 154upx
		.account
			display flex
			align-items center
			border-bottom 1px solid #e5e5e5
			height 110upx
			.i_size
				font-size 70upx
				color #999999
			.input_box
				font-size .8rem
				margin-left .3rem
				color #999999
		.btn
			display flex
			justify-content center
			margin 1.3rem 30upx 0
			background-color #FF9900
			border-radius 5px
			color #ffffff
			font-size 33upx
		.btn:after
			border none
</style>
<style>
	.iconfont{
		color: #FF9900;
		font-size: 50upx;
		margin-right: 10upx;
	}
	.green_yan{
		background: #FF9900;
		color: #FFFFFF !important;
		border-color: #FF9900;
	}
	input::-webkit-input-placeholder{
		color: #00B26A !important;
	}
	.tips{
		color: #CCCCCC;
		margin-right: 30upx;
		margin-left: 60upx;
	}
	.tips text {
		color: #FF7171;
		display: inline-block;
	}
</style>